<template>
  <!-- 页面容器 -->
  <div class="page-container">
    <!-- 顶部导航栏 -->
    <header class="bg-primary-500 text-white p-4 sticky top-0 z-10">
      <div class="flex items-center justify-center space-x-2">
        <i class="fas fa-map-marker-alt"></i>
        <span>沈阳市规划大厦</span>
        <i class="fas fa-caret-down"></i>
      </div>
    </header>

    <!-- 搜索栏 -->
    <div class="bg-primary-500 px-4 pb-4">
      <div class="bg-white rounded-lg px-4 py-3 flex items-center space-x-3 shadow-sm transition-shadow hover:shadow-md">
        <i class="fas fa-search text-gray-400"></i>
        <span class="text-gray-500">搜索饿了么商家、商品名称</span>
      </div>
    </div>

    <div class="pb-20">
      <!-- 美食分类 -->
      <div class="bg-white p-4 mb-4">
        <div class="grid grid-cols-5 gap-4">
          <div
              v-for="category in foodCategories"
              :key="category.id"
              @click="goToBusinessList"
              class="flex flex-col items-center space-y-2 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors"
          >
            <!-- 使用Emoji图标 -->
            <span class="text-3xl">{{ category.icon }}</span>
            <span class="text-xs text-gray-700 truncate w-full text-center">{{ category.name }}</span>
          </div>
        </div>
      </div>

      <!-- 促销横幅 -->
      <div class="bg-gradient-to-r from-orange-400 to-red-500 mx-4 rounded-lg p-4 mb-4 text-white shadow-md">
        <div class="flex justify-between items-center">
          <div>
            <h3 class="text-lg font-bold">品质套餐</h3>
            <p class="text-sm opacity-90 mt-1">搭配齐全吃得好</p>
            <button class="mt-2 text-xs bg-white bg-opacity-20 px-3 py-1 rounded transition-colors hover:bg-opacity-30">
              立即抢购 &gt;
            </button>
          </div>
          <span class="text-4xl">🍱</span>
        </div>
      </div>

      <!-- 超级会员 -->
      <div class="bg-white mx-4 rounded-lg p-4 mb-4 flex items-center justify-between shadow-sm">
        <div class="flex items-center space-x-3">
          <span class="text-3xl">🌟</span>
          <div>
            <h3 class="font-semibold text-gray-800">超级会员</h3>
            <p class="text-xs text-gray-600">• 每月享超值权益</p>
          </div>
        </div>
        <button class="text-primary-500 text-sm font-medium px-2 py-1 rounded hover:bg-primary-50">立即开通 &gt;</button>
      </div>

      <!-- 推荐商家标题 -->
      <div class="flex items-center justify-center py-4">
        <div class="flex-1 h-px bg-gray-300"></div>
        <span class="px-4 text-gray-600 text-sm font-medium">推荐商家</span>
        <div class="flex-1 h-px bg-gray-300"></div>
      </div>

      <!-- 筛选选项 -->
      <div class="flex space-x-4 px-4 pb-4 overflow-x-auto scrollbar-hide">
        <button
            v-for="(filter, index) in filters"
            :key="index"
            :class="[
            'flex items-center space-x-1 text-sm px-3 py-1 rounded-full whitespace-nowrap transition-colors',
            activeFilter === index ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          ]"
            @click="setFilter(index)"
        >
          <span>{{ filter.text }}</span>
          <i
              v-if="filter.icon"
              :class="['text-xs', filter.icon]"
          ></i>
        </button>
      </div>

      <!-- 商家列表 -->
      <div class="space-y-4 px-4">
        <div
            v-for="business in businesses"
            :key="business.id"
            @click="goToBusiness(business.id)"
            class="business-card bg-white rounded-lg p-4 cursor-pointer transition-all hover:shadow-md"
        >
          <div class="flex space-x-4">
            <div class="relative flex-shrink-0">
              <img
                  :src="business.image"
                  :alt="business.name"
                  class="w-20 h-20 rounded-lg object-cover"
              >
              <!-- 购物车数量指示器 -->
              <div
                  v-if="business.cartQuantity > 0"
                  class="cart-indicator"
              >
                {{ business.cartQuantity }}
              </div>
            </div>

            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between mb-1">
                <h3 class="font-semibold text-gray-800 truncate">{{ business.name }}</h3>
                <i
                    :class="[
                    'fas fa-heart transition-colors',
                    business.isFavorite ? 'text-red-500' : 'text-gray-300 hover:text-red-300'
                  ]"
                    @click.stop="toggleFavorite(business.id)"
                ></i>
              </div>

              <div class="flex items-center justify-between mb-1">
                <div class="flex items-center space-x-1">
                  <div class="flex">
                    <i
                        v-for="n in 5"
                        :key="n"
                        :class="[
                        'fas text-xs',
                        n <= Math.floor(business.rating) ? 'fa-star text-yellow-400' : 'fa-star-half-alt text-yellow-400'
                      ]"
                    ></i>
                  </div>
                  <span class="text-xs text-gray-600">{{ business.rating }} 月售{{ business.monthlySales }}单</span>
                </div>
                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded font-medium">蜂鸟专送</span>
              </div>

              <div class="flex items-center justify-between mb-2 text-xs text-gray-600">
                <span>¥{{ business.minOrder }}起送 | ¥{{ business.deliveryFee }}配送</span>
                <span>{{ business.distance }}km | {{ business.deliveryTime }}分钟</span>
              </div>

              <div class="mb-2">
                <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">{{ business.category }}</span>
              </div>

              <div v-if="business.promotions.length" class="space-y-1">
                <div
                    v-for="promotion in business.promotions"
                    :key="promotion.id"
                    class="flex items-center space-x-2"
                >
                  <span
                      class="text-white text-xs px-1 py-0.5 rounded text-center min-w-[20px] flex justify-center"
                      :class="promotion.typeClass"
                  >
                    {{ promotion.type }}
                  </span>
                  <span class="text-xs text-gray-600 truncate">{{ promotion.text }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

// 导入所有商家图片 (本地路径)
import sj01 from '@/assets/sj/sj01.png'
import sj02 from '@/assets/sj/sj02.png'
import sj03 from '@/assets/sj/sj03.png'
import sj04 from '@/assets/sj/sj04.png'
import sj05 from '@/assets/sj/sj05.png'
import sj06 from '@/assets/sj/sj06.png'
import sj07 from '@/assets/sj/sj07.png'
import sj08 from '@/assets/sj/sj08.png'

const router = useRouter()

// 使用Emoji图标的美食分类
const foodCategories = ref([
  { id: 1, name: '美食', icon: '🍜' },
  { id: 2, name: '早餐', icon: '🥞' },
  { id: 3, name: '跑腿代购', icon: '🏃' },
  { id: 4, name: '汉堡披萨', icon: '🍔' },
  { id: 5, name: '甜品饮品', icon: '🧋' },
  { id: 6, name: '速食简餐', icon: '🥡' },
  { id: 7, name: '地方小吃', icon: '🥟' },
  { id: 8, name: '米粉面馆', icon: '🍜' },
  { id: 9, name: '包子粥铺', icon: '🥟' },
  { id: 10, name: '炸鸡炸串', icon: '🍗' }
])

// 筛选选项
const activeFilter = ref(0)
const filters = ref([
  { text: '综合排序', icon: 'fas fa-caret-down' },
  { text: '距离最近' },
  { text: '销量最高' },
  { text: '筛选', icon: 'fas fa-filter' }
])

/**
 * 设置当前激活的筛选条件
 * @param index 筛选条件索引
 */
const setFilter = (index: number) => {
  activeFilter.value = index
}

// 商家数据
const businesses = ref([
  {
    id: 1,
    name: '万家饺子（软件园E18店）',
    image: sj01,
    rating: 4.9,
    monthlySales: 345,
    minOrder: 15,
    deliveryFee: 3,
    distance: 3.22,
    deliveryTime: 30,
    category: '各种饺子炒菜',
    cartQuantity: 3,
    isFavorite: false,
    promotions: [
      { id: 1, type: '新', typeClass: 'bg-blue-500', text: '新用户首单立减9元' },
      { id: 2, type: '特', typeClass: 'bg-orange-500', text: '特价商品5元起' }
    ]
  },
  {
    id: 2,
    name: '小锅饭豆腐馆（全运店）',
    image: sj02,
    rating: 4.8,
    monthlySales: 256,
    minOrder: 15,
    deliveryFee: 3,
    distance: 2.15,
    deliveryTime: 25,
    category: '特色美食',
    cartQuantity: 2,
    isFavorite: true,
    promotions: [
      { id: 1, type: '新', typeClass: 'bg-blue-500', text: '新用户首单立减9元' }
    ]
  },
  {
    id: 3,
    name: '麦当劳麦乐送（全运路店）',
    image: sj03,
    rating: 4.7,
    monthlySales: 678,
    minOrder: 15,
    deliveryFee: 3,
    distance: 1.85,
    deliveryTime: 20,
    category: '汉堡薯条',
    cartQuantity: 1,
    isFavorite: false,
    promotions: [
      { id: 1, type: '满', typeClass: 'bg-red-500', text: '满30减5' }
    ]
  },
  {
    id: 4,
    name: '米村拌饭（浑南店）',
    image: sj04,
    rating: 4.6,
    monthlySales: 420,
    minOrder: 15,
    deliveryFee: 3,
    distance: 2.8,
    deliveryTime: 25,
    category: '各种炒菜拌饭',
    cartQuantity: 0,
    isFavorite: true,
    promotions: [
      { id: 1, type: '特', typeClass: 'bg-orange-500', text: '拌饭套餐特惠19.9元' }
    ]
  },
  {
    id: 5,
    name: '半亩良田排骨米饭',
    image: sj05,
    rating: 4.8,
    monthlySales: 195,
    minOrder: 15,
    deliveryFee: 3,
    distance: 1.2,
    deliveryTime: 28,
    category: '排骨米饭套餐',
    cartQuantity: 0,
    isFavorite: false,
    promotions: [
      { id: 1, type: '特', typeClass: 'bg-orange-500', text: '排骨米饭套餐特惠22元' }
    ]
  },
  {
    id: 6,
    name: '茶兮鲜果饮品（国际软件园店）',
    image: sj06,
    rating: 4.9,
    monthlySales: 480,
    minOrder: 15,
    deliveryFee: 3,
    distance: 0.8,
    deliveryTime: 18,
    category: '甜品饮品',
    cartQuantity: 0,
    isFavorite: true,
    promotions: [
      { id: 1, type: '满', typeClass: 'bg-red-500', text: '满20减5' }
    ]
  },
  {
    id: 7,
    name: '唯一水果捞（软件园E18店）',
    image: sj07,
    rating: 4.7,
    monthlySales: 210,
    minOrder: 15,
    deliveryFee: 3,
    distance: 1.3,
    deliveryTime: 15,
    category: '新鲜水果',
    cartQuantity: 0,
    isFavorite: false,
    promotions: [
      { id: 1, type: '特', typeClass: 'bg-orange-500', text: '水果捞一份9.9元' }
    ]
  },
  {
    id: 8,
    name: '满园春饼（全运路店）',
    image: sj08,
    rating: 4.6,
    monthlySales: 375,
    minOrder: 15,
    deliveryFee: 3,
    distance: 2.1,
    deliveryTime: 30,
    category: '各种春饼',
    cartQuantity: 0,
    isFavorite: true,
    promotions: [
      { id: 1, type: '满', typeClass: 'bg-red-500', text: '满50减8，满80减15' }
    ]
  }
])

/**
 * 跳转到商家列表页
 */
const goToBusinessList = () => {
  router.push('/business-list')
}

/**
 * 跳转到商家详情页
 * @param id 商家ID
 */
const goToBusiness = (id: number) => {
  router.push(`/business/${id}`)
}

/**
 * 切换收藏状态
 * @param id 商家ID
 */
const toggleFavorite = (id: number) => {
  const business = businesses.value.find(b => b.id === id)
  if (business) {
    business.isFavorite = !business.isFavorite
  }
}
</script>

<style scoped>
/* 购物车数量指示器样式 */
.cart-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #f5222d;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 商家卡片样式 */
.business-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 隐藏滚动条样式 */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 弹出动画 */
@keyframes pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>